<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Chord</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>Add Chord</h1>
<form id="chordForm">
  <label for="chordName">Chord Name:</label>
  <input type="text" id="chordName" name="chordName"><br><br>
  
  <label for="chordType">Chord Type:</label>
  <select id="chordType" name="chordType">
    <option value="3">Three</option>
    <option value="7">Seven</option>
    <option value="9">Nine</option>
    <option value="11">Eleven</option>
    <option value="13">Thirteen</option>
  </select><br><br>
  
  <div id="chordNotes"></div><br><br>
  
  <button type="submit">Save</button>
</form>

<script>
//建议把这个用node.js保存到数据库中
$(document).ready(function(){
  $('#chordType').change(function(){
    var chordType = parseInt($(this).val());
    $('#chordNotes').empty();
    for (var i = 1; i <= chordType; i++) {
      $('#chordNotes').append('<label for="note' + i + '">Note ' + i + ':</label>');
      $('#chordNotes').append('<input type="text" id="note' + i + '" name="note' + i + '">');
      $('#chordNotes').append('<br>');
    }
  });
  
  $('#chordForm').submit(function(e){
    e.preventDefault();
    var chordName = $('#chordName').val();
    var chordNotes = [];
    $('input[name^="note"]').each(function(){
      chordNotes.push($(this).val());
    });
    var chords = JSON.parse(localStorage.getItem('chords')) || {};
    chords[chordName] = chordNotes;
    localStorage.setItem('chords', JSON.stringify(chords));
    alert('Chord saved successfully!');
  });
});
</script>
</body>
</html>